<template>
    <div>
        <p id="no-items" v-if="websiteStore.find(keywords).length <= 0">暂无数据.</p>
        <div id="items" v-else>
            <div class="read-item"
            :class="{selected:i === currentIndex}"
            @click="handleItemClick(i,ws.url)"
            v-for="(ws,i) in websiteStore.find(keywords)" :key="i">
                <img :src="ws.screenshot" :alt="ws.title">
                <h2>{{ ws.title }}</h2>
                <button @click.stop="handleDelClick(ws.url)"> x </button>
            </div>
        </div>
    </div>
</template>

<script setup>
    import useIndex from './useIndex'
    import useWebsites from './useWebsites'
    import { watch } from 'vue' 
    const { websiteStore,keywords } = useWebsites()

    const { currentIndex,handleItemClick } = useIndex()
    
    // console.log(keywords.value)
    // watch(keywords,(newValue,oldValue) => {
    //     console.log(newValue)
    // })

    const handleDelClick = (url) => {
        websiteStore.deleteItem(url)
        currentIndex.value = 0
    }

    


</script>

<style lang="scss" scoped>
    #no-items {
        font-weight: bold;
        color: silver;
        text-align: center;
        width: 100%;
        position: absolute;
        top: 100px;
        z-index: -1;
    }

    #items {
        .read-item {
            display: flex;
            align-items: center;
            align-content: center;
            border-bottom: lightgray 2px solid;
            background-color: #fafafa;
            border-left: 10px solid lightgray;
            position: relative;
            padding: 10px;
            //禁止用户选择
            -webkit-user-select: none;
            img {

                width: 20%;
                margin-right: 25px;
                border: 1px solid #ccc;
            }
            &:hover {
                background-color: #eee;

                button {
                    display: inline-block;
                }
            }

            &.selected {
                border-left-color: dodgerblue;
            }

            button {
                position: absolute;
                display: none;
                right: 10px;
                width: 30px;
                height: 30px;
                background-color: #f44336;
                border: none;
                border-radius: 50%;
                color: white;
                text-align: center;
                font-size: 16px;
                cursor: pointer;
                align-content: center;
            }
        }
    }
</style>